<template>
	<div class="container">
		<div>
			<div style="display: flex;margin-bottom: -6px;margin-top: 6px;">
				<el-form-item label="字典名称:">
					<el-input v-model="TypeName" style="width: 180px" placeholder="请输入字典名" />
				</el-form-item>
				<el-button :icon="Search" @click="cha()" />
				<el-button type="primary" plain @click="ShowAdd"> 添加</el-button>
			</div>


			<el-table :data="tableData" :border="true" style="width: 100%">
				<el-table-column fixed prop="Id" label="Id" width="80" />
				<el-table-column prop="TypeCode" label="节点编号" width="150" />
				<el-table-column prop="TypeName" label="节点类型名" width="150" />
				<el-table-column prop="TypeDesc" label="节点备注" width="250" />
				<el-table-column prop="CreateTime" label="创建时间" width="200" />
				<el-table-column prop="Status" label="状态" width="80">
					<template #default="scope">
						<span style="margin-left: 10px">{{ statusText[scope.row.Status] }}</span>
					</template>

				</el-table-column>
				<el-table-column fixed="right" label="操作" min-width="120">
					<template #default="scope">
						<el-button type="primary" size="small" plain @click="ShowEdit(scope.row.Id)">编辑</el-button>
						<el-button type="danger" size="small" plain @click="Delete(scope.row.Id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="demo-pagination-block">
				<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
					layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>

		<!-- 弹窗 -->
		<el-dialog v-model="dialogAddVisible" title="添加" width="600" draggable>
			<Add @onSave="closeAdd" v-if="dialogAddVisible"></Add>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<Update :Id=Id @onSave="closeUpdate" v-if="dialogUpdateVisible"></Update>
		</el-dialog>

	</div>

</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue"
	import type { ComponentSize } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import { ElMessageBox, ElNotification } from 'element-plus'
	import approvalflow from "../../api/wf_approvalflowapi"
	import Add from "./Add.vue"
	import Update from "./Update.vue"
	const Id = ref(0);


	const TypeName = ref("")
	const tableData = ref([])
	const total = ref(0);
	const pageSize = ref(10);
	const pageIndex = ref(1);

	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)
	const dialogUpdateVisible = ref(false);
	const dialogAddVisible = ref(false);

	enum statusText {
		"正常" = 1,
		"删除" = 0,
		"异常" = -1
	}

	const getdata = (TypeName: string = "", PageSize: number = 10, PageIndex: number = 1) => {
		var query = {
			TypeName: TypeName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		approvalflow.query(query).then((res: any) => {
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}

	const Query = () => {
		pageIndex.value = 1;
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	}
	onMounted(() => {
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	})
	//显示添加
	const ShowAdd = () => {
		dialogAddVisible.value = !dialogAddVisible.value
	}
	const cha = () => {
		getdata(TypeName.value);
	}
	const closeAdd = (flag: boolean) => {
		//关闭弹窗
		dialogAddVisible.value = !dialogAddVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	}
	const ShowDetail = (Id: number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id: number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}

	const closeUpdate = (flag: boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	}

	const Delete = (Id: number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			approvalflow.del(Id).then((res: any) => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							Query();
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				}
			}).catch(err => {

			})
		}).catch(() => {

		})
	}

	const handleSizeChange = (val: number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val: number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(TypeName.value, pageSize.value, pageIndex.value);
	}
</script>

<style scoped>
	.container{
		height: 100%;
	}
	.container>div {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem 0;
	}

	.container>div>:nth-child(2) {
		flex-grow: 1;
	}
</style>